<template>
  <div class="product">
    <div class="product-header">
      <div class="product-line"></div>
      <p>产品列表</p>
    </div>
    <div class="product-list">
      <YsCard class="product-item" v-for="(card,index) in arrCard" :key="index">
        <div>
          <img :src="card.url">
          <div class="product-footer">
            <h2>{{card.title}}</h2>
            <p>{{card.text}}</p>
            <!-- <div class="product-line"></div>
            <div class="product-path">
              <span @click="goPath">查看详情</span>
              <img @click="goPath" src="../../assets/images/home_left.png" alt="">
            </div> -->
          </div>
        </div>
      </YsCard>
    </div>
  </div>
</template>
<script>
export default {
  name: '',
  data() {
    return {
      arrCard: [
        { url: require("../../assets/images/home_list01.png"), title: "智能无损检测", text: '面向各行各业大数据建设、管理及应用诉求，一站式提供从数据接入到数据消费全链路的智能数据构建与管理的大数据能力。' },
        { url: require("../../assets/images/home_list02.png"), title: "图片标注", text: '以消费者运营为核心，通过丰富的用户洞察模型和便捷的策略配置，完成消费者多维洞察分析和多渠道触达助力企业实现用户增长。' },
        { url: require("../../assets/images/home_list03.png"), title: "训练平台", text: '是为阿里生态内品牌离打造的一款灵活数据分析服务，支撑品牌商更灵活.更统一地分析其在阿里生态内跨渠道，跨品牌的业务表现，以帮助品牌商全面优化其运营效率和效果。' },
      ]
    }
  },
  methods: {
    goPath() {
      window.location.href = 'http://www.yuanshan-ai.com/index.html'
    }
  },
  mounted() {

  },
  watch: {

  },
  computed: {

  },
  filters: {

  }
}
</script>

<style scoped lang='less'>
.product {
  width: 1200px;
  margin: 0 auto;
  .product-header {
    margin: 50px 0 70px 0;
    display: flex;
    align-items: center;
    .product-line {
      width: 8px;
      height: 56px;
      background: #0488fe;
    }
    p {
      width: 136px;
      font-size: 34px;
      margin-left: 16px;
      font-family: PingFangSC-Semibold;
      line-height: 70px;
      color: #2b2f40;
      opacity: 1;
    }
  }
  .product-list {
    display: flex;
    justify-content: space-between;
    .product-item {
      width: 386px;
      background: #f5f6f7;
      border: none;
      box-shadow: none;
      /deep/ .ivu-card-body {
        padding: 0;
        .product-footer {
          padding: 0 20px 20px;
          h2 {
            padding: 16px 0;
            font-size: 30px;
            font-family: PingFangSC-Semibold;
            color: #2b2f40;
          }
          p {
            font-size: 16px;
            font-family: PingFangSC-Regular;
            color: #55596a;
            max-height: 290px;
            // height: 120px;
            line-height: 32px;
            overflow: hidden;
            /* 内容超出宽度时隐藏超出部分的内容 */
            text-overflow: ellipsis;
          }
          .product-line {
            width: 100%;
            height: 1px;
            // background: #d9dadc;
          }
          .product-path {
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 52px;
            line-height: 52px;
            img {
              width: 20px;
              height: 14px;
              cursor: pointer;
              opacity: 0.9;
              &:hover {
                opacity: 1;
                cursor: pointer;
              }
            }
            span {
              color: #2e70cf;
              font-size: 18px;
              opacity: 0.9;
              &:hover {
                opacity: 1;
                cursor: pointer;
              }
            }
          }
        }
      }
      img {
        width: 100%;
      }
    }
  }
}
@media screen and (max-width: 1600px) {
  .product {
    width: 1000px;
    .product-item {
      flex: 1;
      width: auto !important;
      &:nth-child(2) {
        margin: 0 16px;
      }
    }
  }
}

@media screen and (max-width: 1366px) {
  .product {
    width: 900px;
    .product-item {
      width: auto !important;
      flex: 1;
      &:nth-child(2) {
        margin: 0 16px;
      }
    }
  }
}
</style>